<template>
	<!-- 营业额明细筛选 -->
	<view class="s_wp">
		<view class="s_title">选择时间</view>
		<radio-group class="radio-group" @change="radioChange">
			<label class="radio-group-label" v-for="(item, index) in items" :key="item.value">
				<text>{{item.name}}</text>
				<radio color="#8405dc" class="radio-group-radio" :value="item.value" :checked="index == current" />
			</label>
		</radio-group>
		<view class="s_month" v-if="active==2">
			<text>月份(月)：</text>
			<picker class="s_month_picker" @change="bindPickerChange" :value="mIndex" :range="array">
				<view class="s_month_v">{{array[mIndex]}}</view>
			</picker>
		</view>
		<view class="" v-if="active==3">
			<view class="s_month">
				<text>开始日期：</text>
				<picker mode="date" :value="datebegin" @change="bindDateChangebegin">
					<view class="s_month_v">{{datebegin}}</view>
				</picker>
			</view>
			<view class="s_month">
				<text>截止日期：</text>
				<picker mode="date" :value="dateend" @change="bindDateChangeend">
					<view class="s_month_v">{{dateend}}</view>
				</picker>
			</view>
		</view>
		<view class="s_button" @click="onsumbit">确定</view>

	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				current: 0,
				active: 1,
				items: [{
						value: '1',
						name: '全部'
					},
					{
						value: '2',
						name: '按月份查询'
					},
					{
						value: '3',
						name: '按日期查询'
					}
				],

				mIndex: 0,
				array: ['请选择', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],

				datebegin: getDate({
					format: true
				}),
				dateend: getDate({
					format: true
				}),
			}
		},
		methods: {
			onsumbit(){
				let url='../business/turnover';
				if(this.active==2){
					if(this.mIndex==0){
						this.$api.msg('请选择所要筛选的月份')
						return;
					}
					url+='?month='+this.array[this.mIndex];
				}
				if(this.active==3){
					url+='?begin='+this.datebegin+'&end='+this.dateend;
				}
				this.$navRed(url);
			},
			bindDateChangebegin(e) {
				this.datebegin = e.detail.value
			},
			bindDateChangeend(e) {
				this.dateend = e.detail.value
			},
			radioChange(e) {
				this.active = e.detail.value;
			},
			bindPickerChange(e) {
				this.mIndex = e.target.value
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		color: $font-color-dark;
	}

	.s_wp {
		padding-bottom: 100upx;
	}

	.s_title {
		color: $font-color-light;
		font-size: 30upx;
		padding: 20upx;
	}

	.radio-group {
		background-color: #fff;
		padding: 0 20upx;
	}

	.radio-group-label {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10upx 0;
	}

	.radio-group-radio {
		transform: scale(0.8);
	}

	.s_month {
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 20upx;
		margin-top: 20upx;
	}

	.s_month_picker {
		flex: 1;
	}

	.s_month_v {
		color: #0062CC;
		font-weight: bold;
	}

	.s_button {
		background: $base-color;
		border-radius: 10upx;
		color: #fff;
		line-height: 70upx;
		margin: 60upx 3% 0;
		text-align: center;
		letter-spacing: 1px;
		width: 94%;
	}
</style>
